<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Elix HamburgerMenuButton</title>

    <link rel="stylesheet" href="demos.css" />
    <script type="module" src="../define/HamburgerMenuButton.js"></script>

    <style>
      html {
        height: 100%;
      }

      body {
        height: 100%;
        padding: 0;
      }
    </style>
  </head>

  <body role="main">
    <div class="demo fullScreen portrait">
      <link
        rel="stylesheet"
        href="https://fonts.googleapis.com/icon?family=Material+Icons"
      />
      <style>
        #sampleContent {
          flex: 1;
          overflow: auto;
          -webkit-overflow-scrolling: touch; /* for momentum scrolling */
        }

        p {
          margin: 1em;
        }

        #sampleToolbar {
          align-items: center;
          background: #e0e0e0;
          bottom: 0;
          display: flex;
          font-size: 18px;
          padding: 1em 1em;
        }

        #hamburgerMenuButton {
          font-size: 24px;
        }

        .toolbarButton {
          display: block;
          padding: 1em;
        }

        a.toolbarButton {
          color: inherit;
          font-size: 16px;
          text-decoration: none;
        }

        #logo {
          flex: 1;
          text-align: center;
        }
      </style>
      <div id="sampleContent">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit
          amet facilisis augue, sit amet dignissim felis. Curabitur in blandit
          justo. Duis ornare sem vitae enim feugiat, ultrices facilisis velit
          luctus. Aliquam porttitor sollicitudin nibh. Nulla lobortis quam
          venenatis, aliquam risus non, lacinia purus. Nulla a lectus non urna
          suscipit blandit id eget libero. Suspendisse ac bibendum arcu. Nunc
          consequat maximus aliquet. Nullam facilisis purus neque, sit amet
          egestas purus malesuada nec. In luctus tempus diam sit amet egestas.
        </p>
        <p>
          Pellentesque ipsum dolor, consequat ut nunc at, congue semper nisl.
          Duis id cursus orci, sit amet sollicitudin libero. Proin a vehicula
          neque, eget placerat arcu. Nullam ultricies ullamcorper rutrum. Donec
          nunc augue, porttitor in metus sit amet, molestie egestas magna. Donec
          eget neque elementum, feugiat erat eu, sagittis felis. Quisque vitae
          urna rhoncus sapien condimentum suscipit. Cras luctus sollicitudin
          urna sit amet tincidunt. Suspendisse potenti. Fusce pretium libero et
          augue lobortis, quis iaculis est vehicula.
        </p>
        <p>
          Nam varius et mauris dictum consectetur. Nulla venenatis, ante auctor
          scelerisque feugiat, nulla nisl elementum neque, nec facilisis quam
          erat eu orci. Integer rhoncus quam eu neque volutpat, et pulvinar nibh
          suscipit. In laoreet odio et sem bibendum rhoncus. Nunc dictum
          scelerisque gravida. Suspendisse volutpat nibh lectus, sit amet cursus
          ligula ultrices a. Mauris tempor eget risus sed laoreet. Proin
          fermentum lobortis sapien, et ultrices turpis vestibulum a. Morbi
          mollis nec orci at cursus. Nunc euismod neque dui, eu efficitur risus
          finibus sit amet. Duis felis augue, pretium vel felis a, scelerisque
          hendrerit nibh. Mauris efficitur consectetur molestie. Donec ac dolor
          nec odio mollis placerat. Etiam vel sem elementum, luctus nisi ac,
          volutpat ex. Curabitur auctor bibendum placerat. Aenean maximus ante
          nulla, eget vehicula tortor sagittis a.
        </p>
      </div>
      <div id="sampleToolbar">
        <elix-hamburger-menu-button id="hamburgerMenuButton">
          <a
            class="toolbarButton"
            onclick="hamburgerMenuButton.close()"
            href="javascript:"
            >Home</a
          >
          <a
            class="toolbarButton"
            onclick="hamburgerMenuButton.close()"
            href="javascript:"
            >Products</a
          >
          <a
            class="toolbarButton"
            onclick="hamburgerMenuButton.close()"
            href="javascript:"
            >Search</a
          >
          <a
            class="toolbarButton"
            onclick="hamburgerMenuButton.close()"
            href="javascript:"
            >Account</a
          >
          <a
            class="toolbarButton"
            onclick="hamburgerMenuButton.close()"
            href="javascript:"
            >About Us</a
          >
        </elix-hamburger-menu-button>
        <div id="logo">
          LOGO
        </div>
        <div id="searchIcon" class="material-icons">search</div>
      </div>
    </div>
  </body>
</html>
